<template>
  <div>
    <Header />
    <div class="Breadcrumbs">
      <el-button
        size="mini"
        class="pubBtn3"
        style="margin-right: 20px"
        type="button"
        @click="$router.push('/litigation')"
        >返回</el-button
      >
      <el-breadcrumb separator="-">
        <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
        <el-breadcrumb-item :to="{ path: '/litigation' }"
          ><span class="no-redirect">诉讼管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          ><span class="no-redirect">诉讼搜索</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-main>
      <el-row>
        <el-col :xl="5" :md="6" :push="18">
          <el-input
            clearable
            @clear="clear"
            type="text"
            v-model="val"
            placeholder="请输入原告/被告/案件号"
            class="input-with-select"
          >
            <el-button
              slot="append"
              style="
                background-color: #45a321;
                border: 1px solid #45a321;
                color: #fff;
                border-radius: 0;
              "
              @click="submit"
              type="primary"
              >检索</el-button
            >
            <i slot="prefix-icon" class="el-icon-search"></i>
          </el-input>
        </el-col>
      </el-row>
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#F3F8FE' }"
        align="center"
        :data="tableData"
        border
        class="tableHeight"
      >
        <el-table-column align="center" prop="ccto" label="裁决文书">
        </el-table-column>
        <el-table-column align="center" prop="deo" label="原告/上诉人">
        </el-table-column>
        <el-table-column align="center" prop="plo" label="被告/被上诉人">
        </el-table-column>
        <el-table-column align="center" prop="cdn" label="案件号">
        </el-table-column>
        <el-table-column align="center" width="120" label="操作">
          <template slot-scope="scope">
            <el-button class="see" @click="see(scope.row.cid)" type="text"
              >查看</el-button
            >
            <el-button class="see" @click="openUrl(scope.row.cid)" type="text"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="width: 90%">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-size="page.page_size"
          layout="total, prev, pager, next, jumper"
          :total="Number(page.count)"
          align="left"
        ></el-pagination>
      </div>
    </el-main>
    <Service v-if="this.$route.meta.serve" />
  </div>
</template>

<script>
import { search } from "@/api";
import Header from "@/components/Header";
import Breadcrumb from "@/components/Breadcrumb";
import Service from "@/components/Service";
import { Iitigation, IitigationSearch, IitigationCollection ,iitigationDownload } from "@/api/user";
export default {
  components: {
    Header,
    Breadcrumb,
    Service,
  },
  data() {
    return {
      currentPage: 1, //默认显示页面为1
      pagesize: 10, //    每页的数据条数
      page: [],
      val: null,
      search: "",
      type: null,
      tableData: [],
    };
  },
  // beforeRouteEnter: (to,from,next) => {
  //    // console.log(to)
  // },
  mounted() {
    try {
      if (this.$route.query.val) {
        this.val = this.$route.query.val;
        IitigationSearch({
          keyword: this.$route.query.val,
        }).then((res) => {
          if(res != ''){
            this.tableData = res.list;
            this.page = res.page;
          }
        });
      }
    } catch (e) {
      this.$message(err.message);
    }
  },
  methods: {
    clear() {},
        async openUrl(id) {
      try {
        const res = await iitigationDownload({
          cid: id,
        });
        window.open(res.pdf);
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    see(cid) {
      this.$router.push({ path: "/litigation/details", query: { id: cid } });
    },
    async submit() {
      try {
        const res = await IitigationSearch({ keyword: this.val });
        this.tableData = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await IitigationSearch({
          page: size,
          keyword: this.val,
        });
        this.tableData = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await IitigationSearch({
          page: currentPage,
          keyword: this.val,
        });
        this.tableData = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style scoped >
.pagination {
  margin: 15px 0;
}
.el-pagination {
  text-align: right;
}
.Breadcrumbs {
  background-color: #f4f5f7;
  width: 100%;
  margin-top: 100px;
  padding-left: 30px;
  margin-left: 0 !important;
}
.right {
  margin-right: 10px;
  height: 40px;
  line-height: 40px;
}
@media (max-width: 1600px) {
  #table {
    width: 95% !important;
  }
}
</style>
